import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory, Router, Route, Link, withRouter } from 'react-router'
import { Menu, Icon,Dropdown,Row, Col ,Input,Modal, Button,Avatar } from 'antd';


import '../css/header.css';
import $ from 'jquery';


const Search = Input.Search;


const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
var NavLink = require('./NavLink.js');

class Header extends React.Component {
  state = {
    current: 'mail',
    loading: false,
    visible: false,
    username:null,
    pass:null,
    head:0,
  }
  static defaultProps = {
    listUrl:'http://localhost:8000/php/login.php'
  }
  addCookie=(key,value,day)=>{
      var date=new Date();
      date.setDate(date.getDate()+day);
      document.cookie=key+'='+encodeURI(value)+';expires='+date+';path=/';
    }
  getCookie=(key)=>{
    var str=decodeURI(document.cookie);
    var arr=str.split('; ');
    for(var i=0;i<arr.length;i++){
      var arr1=arr[i].split('=');
      if(arr1[0]==key){
        return arr1[1];
      }
    }
  }
  delCookie= (key,value) =>{
    this.addCookie(key,value,-1);//添加的函数,将时间设置为过去时间
  }
  handleOk = () => {

    this.setState({username:$('#username').val()});
    this.setState({pass:$('#password').val()});
		
    
    this.setState({ loading: true });
    
    setTimeout(() => {
      var that=this;
      if(this.state.username&&this.state.pass){
        
        
        $.ajax({
          dataType:'json',
          type:'post',							
          url:'http://www.angtime.online/php/login.php',
          data:{
            name:this.state.username,
            passWord:this.state.pass
          },
          success:function(data){
            if(data==1){             
              that.setState({ loading: false, visible: false,head:1 });	
              that.addCookie('UserName',that.state.username,1);
                     
            }else{             								
              $('#help').css('color','red').html('用户名或密码错误')	
              that.setState({ loading: false});	
            }								
          }
        });
      }else if(!this.state.username){
        $('#help').css('color','blue').html('请输入用户名')
        this.setState({ loading: false});
      }else if(!this.state.pass){
        $('#help').css('color','blue').html('请输入密码')
        this.setState({ loading: false});
      }
      
    }, 3000);
  }
  componentDidMount(){
    if(this.getCookie('UserName')){
      ReactDOM.render(
          <div >                  
            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>       
          </div>
        , document.getElementById('head'));
     
    }
  }  
  componentDidUpdate(){  
    if(this.state.head==1){
        ReactDOM.render(
          <div>                  
            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />                  
          </div>
        , document.getElementById('head'));
    }else{
      ReactDOM.render(
          <div>                  
            登录                
          </div>
        , document.getElementById('head'));
    }
      
  }
  
  
  handleCancel = () => {
    this.setState({ visible: false });
    // history.goBack();
  }
  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }
  showModal = () => {
    if(!this.getCookie('UserName')){
        this.setState({
          visible: true,
        });
    }else{
      console.log(1);
      this.delCookie('UserName',this.state.username);
      this.setState({head:0});    
    } 
    
  }
  render() {
    
    const { visible, loading } = this.state;
    var letterStyle = {
      float:"left",
      marginLeft:40,      
      height:70,
      width:"93%"
    };
    var margin={
      marginLeft:70,
      marginTop:5,
      position:"absolute"
    }
    var li={
      height:70,
      
      marginLeft:25,
      fontSize:20
    }
    var li1={
      height:70,
      marginLeft:300,
      fontSize:20
    }
    var li3={
      height:70,
      marginLeft:25,
      marginRight:25,
      fontSize:20
    }
    var li2={
      display:"inline-block",
      height:68,
      fontSize:20
    }
    var search={
      height:70,
      marginLeft:25,
      marginRight:25,
      fontSize:20
    }
    
    return (
      <div>        
            <div style={margin}><img  src="images/logo.png" /></div>                 
            <div >
              <Menu
                onClick={this.handleClick}
                selectedKeys={[this.state.current]}
                mode="horizontal"
                style={letterStyle}
              >               
                <Menu.Item key="mail" style={li1}>
                  <NavLink to="/"><Icon type="home" />音乐馆</NavLink>
                </Menu.Item>
                <Menu.Item key="app" style={li3}>
                  <NavLink to="/Mymusic/Like" ><Icon type="play-circle-o" />我的音乐</NavLink>
                </Menu.Item>
                <SubMenu  title={<span style={li2}><Icon type="setting" />菜单</span> }  >                 
                    <Menu.Item key="setting:1"><NavLink to="/" onlyActiveOnIndex>首页</NavLink></Menu.Item>
                    <Menu.Item key="setting:2"><NavLink to="/Singer">歌手</NavLink></Menu.Item>
                    <Menu.Item key="setting:3"><NavLink to="/Album">专辑</NavLink></Menu.Item>
                    <Menu.Item key="setting:4"><NavLink to="/Leaderboard">排行榜</NavLink></Menu.Item>
                    <Menu.Item key="setting:5"><NavLink to="/ClassifyMusic">分类歌单</NavLink></Menu.Item>
                    <Menu.Item key="setting:6"><NavLink to="/Mv">MV</NavLink></Menu.Item>                        
                </SubMenu>
                <Menu.Item key="alipay" style={li}>
                  <NavLink to="/Vip">VIP</NavLink>
                </Menu.Item>
                <Menu.Item key="login" style={li3} >
                  <div onClick={(event) => {
                      event.preventDefault();
                      this.showModal();
                  }} id="head">登录</div>
                </Menu.Item>
                <Search
                  placeholder="input search text"
                  style={{ width: 200 }}
                  onSearch={value => console.log(value)}                
                />               
              </Menu>
              
            </div>

            <div>
              <Modal
                
                visible={visible}
                title="QQ登录"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={[
                  <a href="../register.html" target="_blank"><img src="../images/login-bottom.png" alt=""/></a>,
                  
                  
                ]}
              >
                <p style={{textAlign:'center',fontSize:20}} id="help">账号密码登录</p>
                <div style={{marginLeft:112}}>
                    <div className="inputOuter">
                      <input type="text" placeholder="支持QQ号/邮箱/手机号登录" className="inputstyle" id="username"/>
                    </div>
                    <div className="inputOuter">
                      <input type="password" placeholder="密码" className="inputstyle" id="password"/>
                    </div>
                </div>
                
                 
                <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk} style={{marginLeft:212,marginTop:40}}>
                登录
                </Button>
              </Modal>
            </div>
            
      </div>
    );
  }
}



module.exports = Header;